<template>
    <div class="detail">
        <img :src="listObj.img" class="img"/>
        <div class="release">
            <img src="../../assets/images/pig.jpg" alt="">
            <span>新华社 发布于 2019.3.2 下午 4:30:45</span>
        </div>
        <div class="title">{{listObj.title}}</div>
        <div class="link">
            <!-- 收藏按钮 -->
            <img :src="isCollected?'../../assets/images/col.jpg':'../../assets/images/pig.jpg'" alt="" @tap="colBtn">
            <!-- 点击图片实现分享 -->
            <img src="../../assets/images/pig.jpg" alt="" @click="handleShare">
        </div>
        <div class="btn">
            <button size="mini" open-type="share">转发此文章</button>
        </div>
        <div class="content">
            {{listObj.text}}
        </div>
    </div>
</template>
<script>
import {mapState} from "vuex";
export default {
    data(){
        return {
            isCollected:false,
            listObj:{},
            index:0
        }
    },
    methods:{
        colBtn(){
            this.isCollected = !this.isCollected;
            let title = this.isCollected?'收藏成功':'取消收藏'
            wx.showToast({
                title,
                icon: 'success',
                duration: 1000
            })
            //将对应文章的收藏状态存储到本地,方便下次进来根据状态去确定收藏状态
            let obj = {}
            obj[this.index] = this.isCollected
            wx.setStorage({
                key:"isCollected",
                data: obj
            });
        },
        handleShare() {
            wx.showActionSheet({
                itemList:[
                    '分享到微博','分享到qq','分享到盆友圈'
                ]
            })
        }
    },
    created(){
        // mpvue中 当此页面显示时,次函数不会执行 
        // this.listObj = this.list_tmp[this.$mp.query.index]
        // console.log(this.listObj);
    },
    mounted(){
        this.index = this.$mp.query.index;
        this.listObj = this.list_tmp[this.$mp.query.index]
        //进来取出上次收藏的状态,保持每篇文章上次收藏的状态
        //对没有收藏的处理
        let data = wx.getStorageSync('isCollected');
        // let data = wx.getStorage({//获取本地缓存
        //                 key:"isCollected",
        //                 success:function(res){
        //                     that.setData({
        //                     isCollected:res.data
        //                     });
        //                 },
        //                 })
       
       if (!data) {
            wx.setStorage({
                key:"isCollected",
                data:{}
            });
       } else if (data !== '{}' && data[this.index]){
           this.isCollected = data[this.index];
       } else {
           this.isCollected = false;
       }
        
        
        
    },
    computed:{
        ...mapState(['list_tmp'])
    }
}
</script>
<style>
    .detail .img {
        width: 100%;
        height: 400rpx;
    }
    .release img {
        width: 45rpx;
        height: 45rpx;
        border-radius: 50%;
        margin: 20rpx 20rpx 0;
        vertical-align: bottom;
    }
    .release span {
        font-size: 30rpx;
        font-weight: 900;
    }
    .title {
       font-weight: 900; 
       margin: 30rpx 0 30rpx 20rpx;
    }
    .link {
        text-align: right;
    }
    .link img {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        margin-left: 20rpx;
    }
    .link img:last-of-type {
        margin-right: 40rpx;
    }
    .btn {
        display: flex;
        justify-content: center;
        margin-bottom: 10rpx;
    }
    .content {
        text-indent: 2em;
        font-size: 30rpx;
        line-height: 50rpx;
        padding: 15rpx;
    }
</style>


